<template>
	<view class="flex flex-y-start" @tap="choose_one(info,checked)">
		<view v-if="chat_checked" style="width: 70rpx;margin-top: 40rpx;padding-left: 20rpx;" class="flex flex-x-y">
			<view class="iconfont icon-xuanzhong color-all" style="font-size: 34rpx;width: 30rpx;" v-if="checked">
			</view>
			<view class="iconfont icon-weixuanzhong" style="font-size: 34rpx;width: 30rpx;" v-else></view>
		</view>
		<view class="flex-1 flex flex-y-start" :class="!info.mine?'msg-left':'msg-right'"
			style="padding:32rpx 28rpx 0 28rpx;" :style="info.mine?'flex-direction: row-reverse;':''">
			<!-- 头像 -->
			<view class="msg-image-box" @tap.stop="to_detail">
				<!-- <image :lazy-load="true" :src="info.avatarUrl" mode="aspectFill"></image> -->
				<qq-image :url="info.avatarUrl" class="avatar-image"></qq-image>
			</view>
			<!-- 头像 -->
			<!-- 内容 -->
			<view style="max-width: 452rpx;">
				<view v-if="!info.mine && chatType!='one'" @tap.stop="to_detail" class="msg-nickname fs-26">
					{{remark_obj[info.id] || remark_obj[info.fromid] || group_remark_obj[info.id] ||  info.name}}
				</view>
				<view class="flex flex-y-end read-box" @longpress="edit_one">
					<view class="fs-24 read-status pr" v-if="info.mine &&  show_read_msg">
						<view :class="info.readFlag?'read-status1':'read-status2'">{{info.readFlag?'已读':'未读'}}</view>
					</view>
					<view class="msg-content pr" style="display: inline-block;"
						:class="['msg-content' + info.timestamp]">
						<view style="display: inline-block;transition: color 0.5s;"
							:style="voice_src == src?'color:#D93025;':''" @tap.stop="to_play">
							<text v-if="info.mine" style="display: inline-block;"
								:style="{'padding-right':width+'rpx'}"></text>
							<text class="iconfont icon-shengbo fs-28"></text>
							<view style="display: inline-block;"></view>
							<text style="margin-left: 20rpx;" class="fs-30">{{time}}″</text>
							<text v-if="!info.mine" :style="{'padding-right':width+'rpx'}"></text>
						</view>
					</view>
				</view>

			</view>
			<!-- 内容 -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "msgVoice",
		props: {
			info: {
				type: Object,
				default: () => {},
			},
			chatType: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				time: '0',
				width: 0,
				src: '',
				checked: false,
			};
		},
		computed: {
			voice_src() {
				return this.$store.state.voice_src;
			}
		},
		watch: {
			info() {
				this.set_style();
			},
			chat_checked(value) {
				this.checked = false;
			},
		},
		created() {
			this.set_style();
		},
		methods: {
			to_play() {

				if (!getApp().globalData.voice) {
					getApp().globalData.voice = uni.createInnerAudioContext();
					getApp().globalData.voice.sessionCategory = 'ambient';

					getApp().globalData.voice.onEnded(() => {
						this.vuexSet('voice_src', '');
					});
				}
				if (getApp().globalData.voice.src != this.src) {
					//如果不是当前
					getApp().globalData.voice.src = this.src;
					getApp().globalData.voice.play();
					this.vuexSet('voice_src', this.src);
				} else {
					if (getApp().globalData.voice.paused == false) {
						//如果正在播放
						getApp().globalData.voice.pause();
						this.vuexSet('voice_src', '');

					} else {
						//如果已经暂停
						getApp().globalData.voice.play();
						this.vuexSet('voice_src', this.src);
					}

				}



			},
			set_style() {

				if (this.info.content) {
					let regex = /\[(.+?)\]/g;
					let str_arr = String(this.info.content).match(regex);
					console.log('str_arr', str_arr);
					str_arr.forEach((val, index) => {
						if (index == 0) {
							let time = this.xs(String(val).substr(1, val.length - 2), -1);
							this.time = time;
							let width = (time - 2) * 10;
							if (width > 120) {
								width = 120;
							}
							if (width < 0) {
								width = 0;
							}
							this.width = width;
						}
						if (index == 0) {
							let src = String(this.info.content).substr(0, this.info.content.indexOf('['));
							this.src = src;

						}
					})
				}

			},
			to_detail() {
				return;
				if (this.info.mine) {
					this.toPage('/pages/chat/user?mine=true');
				} else {
					this.$emit('show', this.info);
				}
			},
			edit_one(e) {

				let obj = uni.createSelectorQuery().select('.msg-content' + this.info.timestamp, this);

				obj.boundingClientRect((data) => {

					let h = getApp().globalData.screenHeight;
					let scrollTop = e.changedTouches[0].pageY - e.changedTouches[0].clientY;

					console.log('scrollTop', data.top, data.width);
					let top = data.top;
					let style2 = '';
					let style = 'style1';
					if (h - top > 400) {
						// 下方显示
						top = top + data.height + 14;
						style = this.info.mine ? 'style2' : 'style1';
					} else {
						//上方显示
						top = top - 14;
						style2 = 'top';
						style = this.info.mine ? 'style4' : 'style3';
					}
					this.vuexSet('show_msg_edit', {
						top: top,
						style: style,
						style2: style2,
						info: this.info,
						powers: ['voice', 'text', 'collect', 'check', 'back', 'delete', 'send']
					});

				}).exec();

			},
		}
	}
</script>

<style lang="scss">
	.msg-content {
		background-color: #FFFFFF;
		padding: 20rpx 14rpx 20rpx 22rpx;
		text-align: justify;
		color: #333;
		white-space: pre-line;
		word-break: break-all;
	}

	.msg-left {
		.msg-image-box {
			margin-right: 20rpx;
		}

		.msg-content {
			border-radius: 0px 30rpx 30rpx 30rpx;
		}


	}

	.msg-right {
		.msg-image-box {
			margin-left: 20rpx;
		}

		.msg-content {
			border-radius: 30rpx 0rpx 30rpx 30rpx;
			background-color: $bgColor;
			padding: 18rpx 14rpx 18rpx 22rpx;
			text-align: right;
			color: #FFFFFF;
		}


	}
</style>